<template>
	<view class="pb-128">
		<uni-nav-bar @clickLeft="$tab.back()" :fixed="true" left-icon="left" backgroundColor="transparent" :statusBar="true"
			:border="false" />
			
		<view class="box-1 flex items-center justify-around" :style="{
			background:`url(${globalConfig.appConfig.loginBg})`,
			backgroundSize:'100% 100%'
		}">
			<image :src="globalConfig.appConfig.loginIcon" class="image-1" mode="widthFix"></image>
		</view>
		
		<view class="content">
			<view class="px-32">
				<view class="box-2">
					忘记{{type == 0 ? '支付' : ''}}密码
				</view>
			</view>
			<view class="c px-32 mt-48">
				<u--form labelPosition="left" :model="form" :value="form" ref="form">
					<view class="">
						<u-form-item prop="phonenumber" borderBottom>
							<u--input v-model="form.phonenumber" border="none" placeholder="手机号"></u--input>
						</u-form-item>
					</view>
					<view class="WEIXIN">
						<u-form-item label="" prop="code" borderBottom>
							<u--input v-model="form.code" border="none" placeholder="请填写验证码"></u--input>
							<u-button slot="right" @tap="getCode" :text="tips" size="mini"></u-button>
						</u-form-item>
					</view>
					<u-form-item prop="newPassword" borderBottom>
						<u--input v-model="form.newPassword" type="password" border="none" placeholder="请输入密码"></u--input>
					</u-form-item>
					<u-form-item prop="confirmPassword" borderBottom>
						<u--input v-model="form.confirmPassword" type="password" border="none" placeholder="请再次确认密码">
						</u--input>
					</u-form-item>
				</u--form>
			
				<view class="loginBtn text-32 text-center text-FFF" @click="submit">
					确认修改
				</view>
			</view>
		</view>
		

		<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true" @end="disabled1 = false">
		</u-code>
	</view>
</template>

<script>
	import {
		sendsms,
		revisepassword,
		forgetPassword
	} from "@/api/login.js"
	export default {
		data() {
			return {
				globalConfig: getApp().globalData.config,
				form: {
					phonenumber: "",
					newPassword: "",
					confirmPassword: "",
					code: "",
					superior: "" //上级
				},
				tips: "获取验证码",
				correct: "",
				rules: {
					phonenumber: {
						required: true,
						type: 'string',
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					code: {
						required: true,
						type: 'string',

						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
					newPassword: {
						required: true,
						message: '新密码不能为空'
					},
					confirmPassword: {
						required: true,
						message: '确认密码不能为空'
					}
				},
				type:null,//0修改支付密码
			};
		},
		onLoad(e) {
			this.type = e.type
			if(this.type == 0){
				this.form.phonenumber = this.$store.getters.userInfo.phonenumber
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				var that = this;
				if (this.form.phonenumber.trim() === '') {
					this.$modal.msgError("请输入手机号")
					return false
				}
				if (uni.$u.test.mobile(this.form.phonenumber.trim()) === false) {
					this.$modal.msgError("请输入正确的手机号")
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					sendsms(that.form.phonenumber).then(res => {
						that.correct = res.data;
						console.log(that.correct)
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						that.$refs.uCode.start();
						that.$modal.closeLoading();
					}).catch(() => {
						that.$modal.closeLoading();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				var that = this;
				this.$refs.form.validate().then(res => {
					if (that.form.newPassword != that.form.confirmPassword) {
						that.$modal.msgError("两次输入的密码不一致")
					} else {
						// 修改支付密码
						if(this.type == 0){
							let param = {};
							param.newPayPassword = this.form.newPassword;
							param.uuid = this.correct
							param.verifyCode = this.form.code
							this.$Api.user.forgetPayPassword(param).then(response=>{
								this.$modal.msgSuccess("修改成功")
								this.$tab.back(1500)
							})
						}else{
							// 修改登录密码
							let param = {};
							param.phonenumber = this.form.phonenumber;
							param.newPassword = this.form.newPassword;
							param.code = this.correct
							param.verifyCode = this.form.code
							forgetPassword(param).then(response => {
								this.$modal.msgSuccess("修改成功")
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/login"
									})
								}, 1500)
							})
						}
						
					}
				})
			}
		},
	};
</script>
<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.box-1 {
		width: 750rpx;
		height: 486rpx;

		.image-1 {
			width: 208rpx;
		}
	}

	.box-2 {
		font-size: 56rpx;
		font-weight: bold;
		background-image: linear-gradient(to bottom,
				#ff561d,
				#ff0064);
		/* 从左到右的红色至黄色线性渐变 */
		background-clip: text;
		-webkit-background-clip: text;
		/* Safari/Chrome特定样式，将渐变应用于文字区域 */
		-webkit-text-fill-color: transparent;
		/* Safari/Chrome特定样式，透明化文字内容 */
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}


	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		border-radius: 278rpx;
		line-height: 96rpx;
		margin: 108rpx auto 48rpx;
		background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
	}

	.content {
		padding-top: 90rpx;
		border-radius: 64rpx 64rpx 0 0;
		position: relative;
		top: -64rpx;
		z-index: 9;
		width: 100%;
		background-color: #FFF;
	}
	
	/deep/ .u-button--info{
		border: none !important;
		color: #FFB200;
	}
	
	/deep/ .u-form-item__body{
		padding: 32rpx 0 !important;
	}
	
	/deep/ .u-form-item__body__right__message{
		margin-left: 0 !important;
	}
</style>


